<!--
 * @Description: 
 * @Author: dh
 * @Date: 2021-09-09 17:11:34
 * @LastEditors: dh
 * @LastEditTime: 2025-09-04 10:18:41
-->
<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<title>JS Bin</title>
	</head>

	<body>
		<span>foo</span>
		<div id="container">
			<div class="item item-1">1</div>
			<div class="item item-2">2</div>
			<div class="item item-3">3</div>
			<div class="item item-4">4</div>
			<div class="item item-5">5</div>
			<div class="item item-6">6</div>
			<div class="item item-7">7</div>
			<div class="item item-8">8</div>
			<div class="item item-9">9</div>
		</div>
		<span>bar</span>

		<style>
			span {
				font-size: 2em;
			}

			#container {
				display: grid;
				width: 400px;
				grid-template-columns: [c1] 50px [c2] 50px [c3] 50px [c4];
				grid-template-rows: [r1] 50px [r2] 50px [r3] 50px [r4];
				grid-auto-flow: row;
				grid-auto-flow: column;

			}

			.item-2 {
				/* 这两个属性一起出现设置，则定死了元素的位置，所以元素之前有空余空间则可以安排其他项目 */
				/* 这两个属性单个出现设置，则不确定元素的位置，
				*  如果 grid-auto-flow: row（默认），只设置 grid-column 会出现空间空缺
				*  如果 grid-auto-flow: column，只设置 grid-row 会出现空间空缺
				*/
				grid-column: c3/c4;
				grid-row: r3/r4;
			}
			.item-6 {
				/* 把item2给覆盖了，可以利用这种特性做定位效果 */
				/* grid-column: c2/c4; */
				/* grid-row: r2/r3; */
				/* opacity: 0.5; */
			}

			.item {
				font-size: 2em;
				text-align: center;
				border: 1px solid #e5e4e9;
			}

			.item-1 {
				background-color: #ef342a;
			}

			.item-2 {
				background-color: #f68f26;
			}

			.item-3 {
				background-color: #4ba946;
			}

			.item-4 {
				background-color: #0376c2;
			}

			.item-5 {
				background-color: #c077af;
			}

			.item-6 {
				background-color: #f8d29d;
			}

			.item-7 {
				background-color: #b5a87f;
			}

			.item-8 {
				background-color: #d0e4a9;
			}

			.item-9 {
				background-color: #4dc7ec;
			}
		</style>
	</body>
</html>
